/**
  学习目标：使用ActionCreator、抽取单独的action.js文件
  目的： 遵循规范
  规范：
    1. 使用actionCreator()替代对象写法action
    2. 将action封装到独立的文件中
    3. action文件存在store文件夹中
*/
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import { addCountCreator, desActionCreator } from './store/action';

export default function App() {
  const [show, setShow] = useState(true);

  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>

      <h2>{count * 2}</h2>
      <button onClick={() => dispatch(addCountCreator(5))}>点击+5</button>
      <button onClick={() => dispatch(desActionCreator(5))}>点击-5</button>

      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button onClick={() => dispatch(addCountCreator(10))}>+10</button>
      <button onClick={() => dispatch(desActionCreator(10))}>-10</button>
    </div>
  );
}
